{% extends 'base.html' %}
{% block title %}
    列表筛选视图
{% endblock %}

{% block css %}

{% endblock %}

{% block nav_list %}
    <li class="active"><a href="/list/">列表筛选视图</a></li>
    <li><a href="/overlook/">可视化数据概览</a></li>
    <li><a href="/chart/">可视化大数据分析</a></li>
    <li><a href="/predict/">漏洞解决时间预测</a></li>
{% endblock %}

{% block content %}
    <div class="container">
        <div style="margin-bottom: 10px">
            <form class="form-inline">
                {% csrf_token %}
{#                <div class="form-group">#}
{#                    <label class="text" for="severity">选择漏洞等级</label>&nbsp;#}
{#                    <select class="form-control" id="severity" name="severity">#}
{#                        {{ severity_select }}#}
{#                    </select>#}
{#                </div>&emsp;&emsp;&emsp;#}
{#                <div class="form-group">#}
{#                    <label class="text" for="v_type">选择漏洞类型</label>&nbsp;#}
{#                    <select class="form-control" id="v_type" name="v_type">#}
{#                        {{ v_type_select }}#}
{#                    </select>#}
{#                </div>&emsp;&emsp;&emsp;#}
                <div class="form-group">
                    <label class="text" for="key">漏洞筛选</label>&nbsp;
                    <input style="width: 300px" class="form-control" id="key" name="key" placeholder="请输入漏洞ID 支持模糊搜索">
                </div>
{#                <a class="btn btn-warning" href="/list/">清除所有</a>&nbsp;&nbsp;#}
                &nbsp;
                <button type="submit" class="btn btn-info">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>&nbsp;&nbsp;开始筛选
                </button>
            </form>
        </div>
{#        <div class="panel panel-success">#}
{#            <div class="panel-heading">#}
{#                <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>#}
{#                可视化总览#}
{#            </div>#}
{#            <div class="panel-body">#}
{#                <div class="row">#}
{#                    <div class="col-md-3" id="pie_published" style="height: 160px"></div>#}
{#                    <div class="col-md-3" id="pie_modified" style="height: 160px"></div>#}
{#                    <div class="col-md-3" id="pie_severity" style="height: 160px"></div>#}
{#                    <div class="col-md-3" id="pie_v_type" style="height: 160px"></div>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
        <div class="panel panel-info">
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
                列表视图
            </div>
            <div class="panel-body">
                <table class="table table-striped table-hover">
                    <thead>
                    <tr class="">
                        <th>数据ID</th>
                        <th>漏洞ID</th>
                        <th>发布时间</th>
                        <th>解决时间</th>
                        <th>漏洞等级</th>
                        <th>漏洞类型</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for leak in leaks %}
                        <tr>
                            <td>{{ leak.id }}</td>
                            <td>{{ leak.v_id }}</td>
                            <td>{{ leak.published | date:"Y-m-d" }}</td>
                            <td>{{ leak.modified | date:"Y-m-d" }}</td>
                            {% if leak.severity == "超危" %}
                                <td class="text-danger" style="font-weight: bolder">{{ leak.severity }}</td>
                            {% elif leak.severity == "高危" %}
                                <td class="text-danger">{{ leak.severity }}</td>
                            {% elif leak.severity == "中危" %}
                                <td class="text-warning">{{ leak.severity }}</td>
                            {% else %}
                                <td>{{ leak.severity }}</td>
                            {% endif %}
                            <td>{{ leak.v_type }}</td>
                            <td><a class="btn btn-info btn-xs" href="/list/{{ leak.id }}/" target="_blank">详情</a></td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                <ul class="pagination" style="margin-top: 0">
                    {{ page_html }}
                </ul>
            </div>
        </div>


    </div>
{% endblock %}

{% block js %}
{#<script>#}
{#    let pie_published = echarts.init(document.getElementById("pie_published"));#}
{#    let option_published = {#}
{#        color: ["rgb(101, 136, 115)", "rgb(185, 199, 141)", "rgb(231, 227, 228)", "rgb(210, 191, 165)"],#}
{#        title: {"text": "漏洞数量最多年份TOP10", "left": "center"},#}
{#        tooltip: {trigger: 'item'},#}
{#        series: [{#}
{#            type: 'pie',#}
{#            radius: ['35%', '70%'],#}
{#            avoidLabelOverlap: false,#}
{#            itemStyle: { borderRadius: 2, borderColor: '#fff', borderWidth: 0.5},#}
{#            label: {show: false, position: 'center'},#}
{#            emphasis: { label: {show: true, fontSize: 40, fontWeight: 'bold'} },#}
{#            labelLine: {show: false},#}
{#            data: {{ pie_published }}#}
{#        }]#}
{#    };#}
{#    pie_published.setOption(option_published);#}
{#    window.addEventListener("resize", function () {#}
{#        pie_published.resize();#}
{#    });#}
{#</script>#}
{#<script>#}
{#    let pie_modified = echarts.init(document.getElementById("pie_modified"));#}
{#    let option_modified = {#}
{#        color: ["rgb(101, 136, 115)", "rgb(185, 199, 141)", "rgb(231, 227, 228)", "rgb(210, 191, 165)"],#}
{#        title: {"text": "解决漏洞最多年份TOP10", "left": "center"},#}
{#        tooltip: {trigger: 'item'},#}
{#        series: [{#}
{#            type: 'pie',#}
{#            radius: ['35%', '70%'],#}
{#            avoidLabelOverlap: false,#}
{#            itemStyle: { borderRadius: 2, borderColor: '#fff', borderWidth: 0.5},#}
{#            label: {show: false, position: 'center'},#}
{#            emphasis: { label: {show: true, fontSize: 40, fontWeight: 'bold'} },#}
{#            labelLine: {show: false},#}
{#            data: {{ pie_modified }}#}
{#        }]#}
{#    };#}
{#    pie_modified.setOption(option_modified);#}
{#    window.addEventListener("resize", function () {#}
{#        pie_modified.resize();#}
{#    });#}
{#</script>#}
{#<script>#}
{#    let pie_severity = echarts.init(document.getElementById("pie_severity"));#}
{#    let option_severity = {#}
{#        color: ["rgb(101, 136, 115)", "rgb(185, 199, 141)", "rgb(231, 227, 228)", "rgb(210, 191, 165)"],#}
{#        title: {"text": "漏洞等级构成", "left": "center"},#}
{#        tooltip: {trigger: 'item'},#}
{#        series: [{#}
{#            type: 'pie',#}
{#            radius: ['35%', '70%'],#}
{#            avoidLabelOverlap: false,#}
{#            itemStyle: { borderRadius: 2, borderColor: '#fff', borderWidth: 0.5},#}
{#            label: {show: false, position: 'center'},#}
{#            emphasis: { label: {show: true, fontSize: 40, fontWeight: 'bold'} },#}
{#            labelLine: {show: false},#}
{#            data: {{ pie_severity }}#}
{#        }]#}
{#    };#}
{#    pie_severity.setOption(option_severity);#}
{#    window.addEventListener("resize", function () {#}
{#        pie_severity.resize();#}
{#    });#}
{#</script>#}
{#<script>#}
{#    let pie_v_type = echarts.init(document.getElementById("pie_v_type"));#}
{#    let option_v_type = {#}
{#        color: ["rgb(101, 136, 115)", "rgb(185, 199, 141)", "rgb(231, 227, 228)", "rgb(210, 191, 165)"],#}
{#        title: {"text": "漏洞类型最多TOP10", "left": "center"},#}
{#        tooltip: {trigger: 'item'},#}
{#        series: [{#}
{#            type: 'pie',#}
{#            radius: ['35%', '70%'],#}
{#            avoidLabelOverlap: false,#}
{#            itemStyle: { borderRadius: 2, borderColor: '#fff', borderWidth: 0.5},#}
{#            label: {show: false, position: 'center'},#}
{#            emphasis: { label: {show: true, fontSize: 40, fontWeight: 'bold'} },#}
{#            labelLine: {show: false},#}
{#            data: {{ pie_v_type }}#}
{#        }]#}
{#    };#}
{#    pie_v_type.setOption(option_v_type);#}
{#    window.addEventListener("resize", function () {#}
{#        pie_v_type.resize();#}
{#    });#}
{#</script>#}
{% endblock %}